import React, { Component } from "react";
import "./index.less";
import deploy from "./img/deploy.png";
import order from "./img/order.png";
import comment from "./img/comment.png";
import commodity from "./img/commodity.png";
import conpon from "./img/coupon.png";
import { Card } from "antd";

// console.log(deploy);

export default class Home extends Component {
  render() {
    let situation = (
      <div>
        <span>实时概况</span>
        <span className="update-time">更新时间：2019-08-20 10:39:03</span>
      </div>
    );
    return (
      <div className="home">
        {/* 实时概况 */}
        <Card
          title={situation}
          bordered={false}
          style={{
            width: "100%"
          }}
        >
          <div className="content-flex">
            <div className="flex-part bg-color-1">
              <div className="">
                <div className="data">345</div>
                <div>今日订单总数</div>
              </div>
            </div>
            <div className="flex-part bg-color-2">
              <div>
                <div className="data">¥345</div>
                <div>今日销售额</div>
              </div>
            </div>
            <div className="flex-part bg-color-3">
              <div>
                <div className="data">3459485</div>
                <div>今日浏览量</div>
              </div>
            </div>
            <div className="flex-part bg-color-4">
              <div>
                <div className="data">345</div>
                <div>今日订房数</div>
              </div>
            </div>
          </div>
        </Card>
        {/* 订单信息 */}
        <Card
          title="订单信息"
          bordered={false}
          style={{ width: "100%", margin: "15px 0" }}
        >
          <div className="content-flex">
            <div className="flex-part order-information">
              <div className="">
                <div className="data">345</div>
                <div className="order-status">已付款</div>
              </div>
            </div>
            <div className="flex-part order-information">
              <div>
                <div className="data">¥345</div>
                <div className="order-status">已完成</div>
              </div>
            </div>
            <div className="flex-part order-information">
              <div>
                <div className="data">34</div>
                <div className="order-status">已取消</div>
              </div>
            </div>
            <div className="flex-part order-information">
              <div>
                <div className="data">45</div>
                <div className="order-status">已退款</div>
              </div>
            </div>
          </div>
        </Card>
        {/* 快捷管理 */}
        <Card
          title="快捷管理"
          bordered={false}
          style={{ width: "100%", margin: "15px 0" }}
        >
          <div className="content-flex">
            <div className="flex-part manger">
              <div>
                <img src={deploy} alt="" />
                <div className="order-status">小程序配置</div>
              </div>
            </div>
            <div className="flex-part manger">
              <div>
                <img src={order} alt="" />
                <div className="order-status">订单管理</div>
              </div>
            </div>
            <div className="flex-part manger">
              <div>
                <img src={conpon} alt="" />
                <div className="order-status">优惠券管理</div>
              </div>
            </div>
            <div className="flex-part manger">
              <div>
                <img src={comment} alt="" />
                <div className="order-status">评论管理</div>
              </div>
            </div>
            <div className="flex-part manger">
              <div>
                <img src={commodity} alt="" />
                <div className="order-status">商品管理</div>
              </div>
            </div>
          </div>
        </Card>
      </div>
    );
  }
}
